<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入依赖 -->
    <script src="https://unpkg.com/@antv/l7"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=dfb26d98b5b3f2ca63eca2a2284366df"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #map {
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <!-- 2. 设置挂载点 -->
    <div id="map">

    </div>

    <script>
        // L7 不提供地图 只是地理数据可视化
        /* 
            Scene:
                1.Map
                2.Layer
        */
        const scene = new L7.Scene({
            // 设置场景的挂载点
            id: 'map',
            map: new L7.GaodeMap({
                style: 'dark',
                center: [114.30, 30.50],
                // pitch: 70,
                zoom: 2,

            }),
            // 隐藏logo
            logoVisible: false
        })
        // 地图控件
        scene.on('loaded', () => {
            console.log(123)
            // 地图主题控件
            const mapTheme = new L7.MapTheme();
            scene.addControl(mapTheme);
        });
    </script>
</body>

</html>